<template>
    <div>
        <div class="tou">
            <div class="bx">
            <div class="inp">
                <p>已有</p><h3>4,839,527</h3><p>位业主提交委托</p>
                <div class="inp1">
                <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" />
                    </el-form-item>
                </el-form>
                <div class="go" @click="go">立即委托</div>
                </div>
                <p class="p">十秒急速评估--马上知道收益</p>
                <div>  
                    <img src="../assets/phone.png" alt="">
                    <i>50万业主的选择</i>
                </div>
            </div>
            </div>
        </div>
        <div class="img">
            <img src="../assets/yz.jpg" alt="">
            <img src="../assets/yz2.jpg" alt="">
            <img src="../assets/yz3.jpg" alt="">
            </div>
    </div>
</template>

<script>
window.onscroll = function () {
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t >= 500) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
    }
export default {
  data() {
    return {
      form: {
        phone: "",
      },
      rules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods:{
    go(){
        let reg=/^1[3-9]\d{9}$/
        if(reg.test(this.form.phone)){//正则验证通过
        let params=`phone=${this.form.phone}`
            this.axios.post(this.$store.state.url + '/xh/user/phonetable', params).then(res => {//发送请求存入数据库·
                if(res.data.code==200){
                    alert("委托成功，售后将会用客服和您沟通！")
                }else{
                    alert("委托失败")
                }
        })
    }}
  }
};
</script>

<style lang="scss" scoped>
.tou{
    width: 100vw;
    height:500px;
    overflow: hidden;
    background-image: url("https://webimg.ziroom.com/288292c3-bb4e-48fa-839a-74b0cadb6c91.jpg");
    background-size: 100%;
    .bx{
        width: 1152px;
        margin: 0 auto;
        .inp{
            background-color: #fff;
            width: 380px;
            margin: 30px 0 0 100px;
            height: 270px;
            position: relative;
            top: 5vw;
            left:40vw;
            padding:20px 30px ;
            display: flex;
            flex-wrap:wrap;
            P{
                font-size: 20px;
                color: rgb(91, 91, 91);
            }
            h3{
                
                font-size: 30px;
                margin:-10px 5px 0 5px;
                color: rgb(255, 111, 39);
            }
            .inp1{
                display: flex;
                .go{
                    cursor: pointer;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    width: 100px;
                    height: 40px;
                    color: #fff;
                    font-size: 20px;
                    background-color:rgb(255, 140, 39);
                    &:active{
                        background-color: rgb(255, 64, 39);
                    }
                }
            }
            .p{
                cursor: pointer;
                font-size: 18px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                width: 360px;
                height: 54px;
                color:  rgb(255, 147, 39);
                background-color:rgb(253, 242, 233) ;
                border:1px solid rgb(255, 115, 39);
                &:hover{
                    color:#fff;
                    background-color:rgb(255, 140, 39);
                }
            }
            img{
                width: 200px;
                height: 38px;
            }
            i{
                width: 150px;
                display: block;
                font-size: 20px;
                margin-top: -37px;
                margin-left: 200px;
                
            }
        }
    }
}

.img{
    margin-top: 200px;
    width: 1152px;
    margin: 0 auto;
}

.el-form{
    width: 259px
}
</style>